import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import { visualizer } from 'rollup-plugin-visualizer'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react({
      // 启用JSX运行时优化
      jsxRuntime: 'automatic',
    }),
    tailwindcss(),

    // 构建分析工具
    visualizer({
      filename: 'dist/stats.html',
      open: true,
      gzipSize: true,
      brotliSize: true,
    }),
  ],

  // 构建优化配置
  build: {
    // 启用代码分割
    rollupOptions: {
      output: {
        // 手动分包策略
        manualChunks: {
          // React相关库
          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
          // Redux相关
          'redux-vendor': ['@reduxjs/toolkit', 'react-redux'],
          // Three.js相关
          'three-vendor': ['three', '@react-three/fiber', '@react-three/drei', 'three-stdlib'],
          // UI库
          'ui-vendor': ['antd'],
          // 工具库
          'utils-vendor': ['axios', 'crypto-js', 'i18next', 'react-i18next'],
        },
        // 资源文件命名
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: (assetInfo) => {
          const name = assetInfo.name || 'asset'
          const info = name.split('.')
          const ext = info[info.length - 1]
          if (/\.(png|jpe?g|gif|svg|webp|avif)$/i.test(name)) {
            return `assets/images/[name]-[hash].${ext}`
          }
          if (/\.(woff2?|eot|ttf|otf)$/i.test(name)) {
            return `assets/fonts/[name]-[hash].${ext}`
          }
          return `assets/[name]-[hash].${ext}`
        },
      },
    },
    // 启用压缩
    minify: 'terser',
    terserOptions: {
      compress: {
        // 移除console
        drop_console: true,
        drop_debugger: true,
      },
    },
    // 设置chunk大小警告限制
    chunkSizeWarningLimit: 1000,
    // 启用CSS代码分割
    cssCodeSplit: true,
    // 启用sourcemap（生产环境可关闭）
    sourcemap: false,
  },

  // 依赖预构建优化
  optimizeDeps: {
    include: [
      'react',
      'react-dom',
      'react-router-dom',
      '@reduxjs/toolkit',
      'react-redux',
      'three',
      '@react-three/fiber',
      '@react-three/drei',
      'antd',
      'axios',
      'i18next',
      'react-i18next',
    ],
    exclude: ['three-stdlib'],
  },

  // 路径别名
  resolve: {
    alias: {
      '@': '/src',
      '@components': '/src/components',
      '@pages': '/src/page',
      '@services': '/src/services',
      '@utils': '/src/utils',
      '@assets': '/src/assets',
    },
  },

  // 开发服务器配置
  server: {
    proxy: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      '/baidu': {
        target: 'https://aip.baidubce.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/baidu/, ''),
        secure: true,
      },
      // 语音合成 text2audio 服务
      '/tsn': {
        target: 'https://tsn.baidu.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/tsn/, '/text2audio'),
        secure: true,
      },
    },
    // 启用HMR
    hmr: true,
  },

  // CSS配置
  css: {
    devSourcemap: false,
  },
})
